<template>
    <div class="logo_container">
        <router-link class="index_link" :to="{ name: 'indexPage' }">
            <!-- <img :src="props.img" /> -->
            <span class="siteTitle text-primary">{{ props.title }}</span>
        </router-link>
    </div>
</template>

<script setup lang='ts'>
const props = defineProps({
    title: {
        type: String,
        required: false,
        default: () => 'Title'
    },
    img: {
        type: String,
        required: true,
        default: () => 'src/assets/quasar-logo-vertical.svg'
    }
})
</script>

<style lang="scss">
.text-center {
    justify-content: center !important;
}

.logo_container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;

    a.index_link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-flow: row nowrap;
        text-decoration: none;

        img {
            display: inherit;
            height: 40px;
            width: auto;
        }

        span {
            display: flex;
            align-items: center;
            justify-content: center;
            height: inherit;
            margin-left: 0.5em;
            font-size: 1.2em;
            color: white;
        }
    }
}
</style>
